<template>
	<view>
		<view class="con title">
			<text>编辑</text>
			<text @click="release">确定</text>
		</view>
		<view class="con middle">
			<view><input type="text" placeholder="输入标题..." v-model="title" /></view>
			<view>
				<picker class="first" @change="bindPickerChange" :value="index" :range="array">
					<view :class="index == -1 ? 'gray' : ''">{{ index == -1 ? '选择主办部门' : array[index] }}</view>
				</picker>
				<image src="https://i.loli.net/2021/07/24/kcn4voHPs7Xrea1.png"></image>
			</view>
			<view class="time">
				<view class="second">
					<picker mode="date" @change="registrationStart" value="YYYY-MM-DD">
						<view :class="registrationStartTime == 0 ? 'gray' : ''">{{ registrationStartTime == 0 ? '报名开始时间' : registrationStartTime | format }}</view>
					</picker>
					<image src="https://i.loli.net/2021/07/24/kcn4voHPs7Xrea1.png"></image>
				</view>
				<view class="second">
					<picker mode="date" @change="registrationEnd" value="YYYY-MM-DD">
						<view :class="endTimeOfRegistration == 0 ? 'gray' : ''">{{ endTimeOfRegistration == 0 ? '报名结束时间' : endTimeOfRegistration  | format}}</view>
					</picker>
					<image src="https://i.loli.net/2021/07/24/kcn4voHPs7Xrea1.png"></image>
				</view>
			</view>
			<view class="time">
				<view class="second">
					<picker mode="date" @change="activeiesBegan" value="">
						<view :class="activeiesBeganTime == 0 ? 'gray' : ''">{{ activeiesBeganTime == 0 ? '活动开始时间' : activeiesBeganTime  | format}}</view>
					</picker>
					<image src="https://i.loli.net/2021/07/24/kcn4voHPs7Xrea1.png"></image>
				</view>
				<view class="second">
					<picker mode="date" @change="activeiesEnd" value="YYYY-MM-DD">
						<view :class="activeiesEndTime == 0 ? 'gray' : ''">{{ activeiesEndTime == 0 ? '活动结束时间' : activeiesEndTime  | format}}</view>
					</picker>
					<image src="https://i.loli.net/2021/07/24/kcn4voHPs7Xrea1.png"></image>
				</view>
			</view>
			<textarea maxlength="-1" placeholder="输入内容..." v-model="content" />
		</view>
		<view class="con bottom"><robby-image-upload :value="imageData" :limit="limitNumber" fileKeyName="file" @delete="deleteImage" @add="addImage" :server-url="serverUrl"></robby-image-upload></view>
		<uni-popup ref="sendError" type="message"><uni-popup-message type="error" message="修改失败" :duration="1000"></uni-popup-message></uni-popup>
		<uni-popup ref="sendSuccess" type="message"><uni-popup-message type="success" message="修改成功" :duration="1000"></uni-popup-message></uni-popup>
	</view>
</template>

<script>
import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue';
export default {
	data() {
		return {
			limitNumber: 1,
			imageData: [],
			serverUrl: 'http://172.17.26.211:3334/uploadFile',
			title: '',
			content: '',
			array: ['中国', '美国', '巴西', '日本'],
			index: -1,
			registrationStartTime: 0,
			endTimeOfRegistration: 0,
			activeiesBeganTime: 0,
			activeiesEndTime: 0,
			a:0,
			id:0,
		};
	},
	components: { robbyImageUpload },
	created() {
		uni.getStorage({
			key: 'value',
			success: res => {
				this.id = res.data.active_id
				this.imageData.push(res.data.active_main_picture);
				this.title = res.data.active_title;
				this.getIndex(res.data.address)
				this.index = this.a;
				this.registrationStartTime = res.data.registration_start_time;
				this.endTimeOfRegistration = res.data.registration_end_time;
				this.activeiesBeganTime = res.data.active_start_time;
				this.activeiesEndTime = res.data.active_end_time;
				this.content = res.data.active_details;
			}
		});
	},
	filters: {
		format(value) {
			let date = new Date(value);
			let year = date.getFullYear();
			let month = date.getMonth()+1;
			let day=date.getDate();
			return year + '-' + (month < 10 ? '0' + month : month)+'-'+(day < 10 ? '0' + day : day);
		}
	},
	methods: {
		getIndex(item) {
			 this.array.forEach((v, i) => {
				if (v == item) return this.a=i
			});
		},
		deleteImage(e) {
			this.imageData.splice(e.allImages.length,1)
		},
		addImage(e) {
			const { data } = JSON.parse(e.allImages[e.allImages.length - 1]);
			this.imageData.push(data);
		},
		bindPickerChange: function(e) {
			this.index = e.target.value;
		},
		registrationStart(e) {
			this.registrationStartTime = e.detail.value;
		},
		registrationEnd(e) {
			this.endTimeOfRegistration = e.detail.value;
		},
		activeiesBegan(e) {
			this.activeiesBeganTime = e.detail.value;
		},
		activeiesEnd(e) {
			this.activeiesEndTime = e.detail.value;
		},
		async release() {
			const res = await this.$http({
				url: '/activites/editCampusActivites',
				method: 'post',
				data: {
					active_id:this.id,
					active_details: this.content,
					active_end_time: this.activeiesEndTime,
					active_main_picture: this.imageData[0],
					active_start_time: this.activeiesBeganTime,
					active_title: this.title,
					address: this.array[this.index],
					registration_end_time: this.endTimeOfRegistration,
					registration_start_time: this.registrationStartTime,
				}
			});
			// console.log(res);
			if (res.code != 200) this.$refs.sendError.open();
			this.$refs.sendSuccess.open();
			uni.reLaunch({
				url: '/pages/activity/activity'
			});
		}
	}
};
</script>

<style lang="less">
@import url('@/static/font/iconfont.css');
.con {
	width: 690rpx;
	margin: 0 auto;
}

.gray {
	color: gray;
}
.title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 110rpx;
	> text:first-child {
		height: 64rpx;
		font-size: 43rpx;
		font-weight: bold;
	}
	> text:last-child {
		width: 130rpx;
		height: 64rpx;
		background-color: #f9cc66;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30rpx;
	}
}
.middle {
	width: 690rpx;
	.time {
		display: flex;
		justify-content: space-between;
	}
	> view {
		width: 690rpx;
		height: 130rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		position: relative;
		image {
			width: 30rpx;
			height: 15rpx;
			position: absolute;
			top: 40rpx;
			right: 10rpx;
			z-index: -9999;
		}
	}
	input {
		height: 78rpx;
		width: 690rpx;
		font-size: 32rpx;
		border-bottom: 2rpx solid #ebebeb;
	}
	.first {
		height: 78rpx;
		width: 690rpx;
		font-size: 32rpx;
		border-bottom: 2rpx solid #ebebeb;
	}

	.second {
		height: 78rpx;
		font-size: 32rpx;
		border-bottom: 2rpx solid #ebebeb;
		position: relative;
		width: 326rpx;
		image {
			width: 30rpx;
			height: 15rpx;
			position: absolute;
			top: 20rpx;
			right: 10rpx;
			z-index: -9999;
		}
	}
	textarea {
		margin-top: 60rpx;
		font-size: 32rpx;
		width: 690rpx;
	}
}
.bottom {
	margin-bottom: 20rpx;
}
.foot {
	width: 690rpx;
	height: 190rpx;
	background-color: gray;
}
</style>
